<template>
	<view class="orderone_wrapper">
		<view class="shopname_wrap">
			<i class="iconfont icon-dianpu"></i>
			<text class="name">{{shopname}}</text>
		</view>
		<view class="order_item">
			<view class="order_up">
				<view class="picture">
					<img :src="orderInfo.cover" alt="" @error="tabErrorPicture" />
				</view>
				<view class="chat_intro">
					<view class="intro">
						<view class="title">{{orderInfo.title}}</view>
						<view class="msc" v-html="orderInfo.custom_desc"></view>					
					</view>
					<view class="price">
						<view>￥<text class="tip">{{orderInfo.price}}</text></view>
						<view>x<text>{{orderInfo.num || 1}}</text></view>
					</view>		
				</view>
			</view>
			<view class="order_down">
				需付款：<text class="tip">{{orderInfo.money || 0}}</text>
			</view>
		</view>
		<view class="coupon" @click="findCoupon">
			<view>优惠券</view>
			<view><text class="num">{{orderInfo.coupon || '暂无可用'}}</text><i class="iconfont icon-arrow-right"></i></view>
		</view>
		<view class="coupon_footer">
			<view>合计：<text>￥{{orderInfo.price}}</text></view>
			<button @click="submitOrder">提交订单</button>
		</view>
		<!-- 优惠券弹出层 -->
		<u-popup :show="couponVisible" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="closeOrderPopup">
			<view class="search_wrap">
				<u--input placeholder="请输入优惠码" clearable shape="circle" v-model="keyword"></u--input>
				<u--text type="error" class="searchBtn" text="兑换" @click="searchExchange"></u--text>
			</view>
			<view class="tabs_wrap">
				<u-tabs :list="navList" :current="current" :itemStyle="{'width': '50%','height': '44px','padding': 0}" @click="chooseItem"></u-tabs>
				<view class="tabs_content" v-if="list.length > 0">
					<view class="tabs_item" v-if="current > 0">不可用</view>
					<view class="tabs_item" v-else>可用</view>
				</view>
				<view class="noData" v-if="list.length == 0">
					<i class="iconfont icon-youhuiquan"></i>
					<text class="name">暂无优惠券</text>
				</view>
			</view>
			<view class="btn_footer">
				<button @click="closeOrderPopup">不使用优惠券</button>
			</view>
		</u-popup>
		
	
	</view>
</template>

<script>
	import { api_getOneKnowledgeInfo } from '@/api/api'
	export default {
		data() {
			return {
				shopname: uni.getStorageSync('company_name'),
				orderInfo: {},
				keyword: '',
				navList: [
					{ name: '可用' },
					{ name: '不可用' },
				],
				list: [],
				current: 0,
				couponVisible: false,
			}
		},
		onLoad(options){
			this.init(options);
		},
		methods: {
			init(opt){	//	初始化
				api_getOneKnowledgeInfo({id: opt.id}).then(res => {
					if (res.code == 1) {
						this.orderInfo = res.data;
					} else {
						uni.showToast({ title: res.msg,icon: 'error' });
					}
				}).catch(err => console.log(err))
			},
			tabErrorPicture(){	// 学习记录列表图片加载失败				
				this.orderInfo.cover = this.errorProduct;		
			},
			findCoupon(){	// 查看优惠券
				this.couponVisible = true;
			},	
			chooseItem(v){	// 优惠券类型选择
				this.current = v.index;
			},
			closeOrderPopup(){
				this.couponVisible = false;
			},
			searchExchange(){	// 兑换
				if (!this.keyword){
					uni.showToast({title: '兑换内容为空',icon: 'error'});
					return;
				}
				console.log('search:',this.keyword);
			},
			submitOrder(){	//	提交订单
				console.log('submit order');
			}
		}
	}
</script>

<style lang="scss" scoped>
.orderone_wrapper{
	height: 80vh;
	padding: 0 0 100px 0;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	position: relative;
	.shopname_wrap{
		height: 40px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eaeaea;
		padding: 0 10px;
		box-sizing: border-box;
		.iconfont{
			display: block;
			font-size: 22px;			
		}
		.name{
			display: block;
			font-size: 15px;
			padding: 0 0 0 5px;
		}
	}
	.order_item{
		padding: 10px;
		box-sizing: border-box;
		.order_up{
			display: flex;
			.picture{
				width: 100px;
				height: 100px;
				img{
					display: block;
					width: 100%;
					height: 100%;
					margin: 0;
				}
			}
			.chat_intro{
				width: calc(100% - 100px);
				padding: 0 0 0 10px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.intro{
					text-align: left;
					.title{
						font-size: 14px;
					}
					.msc{
						font-size: 12px;
						color: #999;
					}
				}
				.price{
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					.tip{
						display: inline-block;
						font-size: 20px;
						color: #f00;
					}
				}
			}
		}
		.order_down{
			font-size: 14px;
			line-height: 24px;
			text-align: right;
			.tip{
				color: #f00;
			}
		}
	}
	.coupon{
		height: 40px;
		padding: 0 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 14px;
		justify-content: space-between;
		border-top: 1px solid #eaeaea;
		border-bottom: 1px solid #eaeaea;
		.num{
			color: #ccc;
		}
	}
	.coupon_footer{
		width: 100%;
		height: 50px;
		padding: 0 0 0 20px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fafafa;
		button{
			width: 150px;
			height: 50px;
			border-radius: 0;
			background-color: #f00;
			color: #fff;
			margin: 0;
		}
	}
	.u-popup{
		.search_wrap{
			width: 100%;
			padding: 10px 60px 10px 10px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			.searchBtn{
				width: 40px;
				line-height: 38px;
				position: absolute;
				right: 10px;
				top: 10px;
			}
		}
		.tabs_wrap{
			padding: 0 0 20px;
			box-sizing: border-box;
			.tabs_content{
				.tabs_item{
					
				}
			}
			.noData{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40px 0;
				box-sizing: border-box;
				.iconfont{
					font-size: 60px;
					color: #eee;
				}
				.name{
					font-size: 14px;
					line-height: 44px;
					color: #999;
				}
			}
		}
		.btn_footer{
			button{
				background-color: #f00;
				border-radius: 0;
				border: none;
				font-size: 15px;
				color: #fff;
			}			
		}
	}
}
</style>
